<template>
  <div class="common-layout">
    <HeadContent title="假期类型设定"></HeadContent>
    <TagComtent></TagComtent>
    <el-container>
      <el-main>
        <el-space wrap :size="sizeSpace">
          <!-- <el-card  shadow="hover"> -->
          <div style="margin-left: 5vh;">
            <el-button type="primary" @click="router.push('/addjiaqileixing')"><el-icon>
                <Plus />
              </el-icon>&nbsp;添加</el-button>
          </div>
          <!-- </el-card> -->

          <el-card style="width: 1400px" shadow="hover">
            <el-table :data="getLeaveType" style="width: 100%">
              <el-table-column prop="type" label="假期类型" width="300" />
              <el-table-column prop="limitDays" label="是否受限" width="300" />
              <el-table-column fixed="right" label="操作" min-width="300">
                <template #default="scope">

                  <el-button type="warning" plain @click="doDialogFormVisible(scope.row)"><el-icon>
                      <Refresh />
                    </el-icon>&nbsp;修改</el-button>

                  <div class="CaozuoDiv">
                    <el-button type="danger" @click="deleteLeavefn(scope.row)"><el-icon>
                        <Minus />
                      </el-icon>&nbsp;删除</el-button>
                  </div>

                </template>
              </el-table-column>
            </el-table>
          </el-card>

          <!-- 分页 -->

          <div class="demo-pagination-block">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :size="size"
              :background="background" :disabled="disabled" layout="prev, pager, next, jumper" :total="1000"
              @size-change="handleSizeChange" @current-change="handleCurrentChange" />
          </div>
        </el-space>
      </el-main>
    </el-container>
  </div>
  <!--弹出框内容-->
  <el-dialog v-model="dialogFormVisible" title="修改假期类型" width="500">
    <el-form :model="updateform">
      <el-form-item label="假期名称：" :label-width="formLabelWidth">
        <el-select v-model="updateform.type" placeholder="---请选择---">
          <el-option v-for="item in addLeave1" :key="item.id" :label="item.type" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="是否受天数影响：" :label-width="formLabelWidth">
        <el-select v-model="updateform.limitDays" placeholder="请选择">
          <el-option label="是" value="1" />
          <el-option label="否" value="0" />
        </el-select>
      </el-form-item>

    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">返回</el-button>
        <el-button type="primary" @click="handleSubmit">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import {
  Refresh, Plus, Minus,

} from '@element-plus/icons-vue'
import TagComtent from '@/components/TagComtent.vue'


const addLeave1 = ref<addLeave[]>([])
const getAddLeaveFn = async () => {
  const res = await getLeave()
  addLeave1.value = res.data
}
getAddLeaveFn()

//获取假期类型列表数据接口调用

const getLeaveType = ref<addLeave[]>([])
const getLeaveFn = async () => {
  const res = await getLeave();
  getLeaveType.value = res.data;
}
getLeaveFn()

// const flag = ref<boolean>(true)
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'

//修改假期类型弹出框内容
const updateform = reactive({
  id: 0,
  type: '',
  limitDays: '',
})
function doDialogFormVisible(row: any) {
  dialogFormVisible.value = true;
  updateform.type = row.type
  updateform.limitDays = row.limitDays
}

const handleSubmit = async () => {
  try {
    // 提交更新
    await UpdateLeave(updateform);

    // 重新获取数据
    const response = await getLeave();
    getLeaveType.value = response.data; // 假设响应中有一个data属性包含新数据列表
    dialogFormVisible.value = false; // 关闭对话框
    alert('更新成功'); // 可以显示一个成功的提示信息给用户
  } catch (error) {
    console.error('更新或获取数据失败:', error);
    // 显示错误消息给用户
  }
}

//删除按钮
const deleteLeavefn = async (row:addLeave) => {
  console.log(row.id)
  const res = await deleteLeave(row.id)
  ElMessage.success('删除成功')
  console.log(res)
  getLeaveFn()
}

import HeadContent from '@/components/HeadContent.vue'

const sizeSpace = ref(40)

import type { ComponentSize } from 'element-plus'
import router from '@/router'
import type { addLeave } from '@/model'
import { deleteLeave, getLeave, UpdateLeave } from '@/api/leaveType'
import {  } from '@/api/staffSchedule'
const currentPage = ref(5)
const pageSize = ref(100)
const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}

</script>
<style scoped>
.demo-form-inline .el-input {
  --el-input-width: 200px;
}

.demo-form-inline .el-select {
  --el-select-width: 200px;
}

.CaozuoDiv {
  margin-left: 20px;
  display: inline;
}
</style>
